<template>
  <view class="detail">
    <u-swiper
      :list="multiple ? (detail.urls || []).map(e => e.url).slice(0, 4) : [detail.urls && detail.urls.length > 0 ? detail.urls[index].url : []]"
      :height="'750rpx'"
      indicator
      indicatorMode="dot"
      :autoplay="false"
      circular
    ></u-swiper>
    <view class="content">
      <p class="name">商品系列：{{ detail.name }}</p>
      <p class="desc" v-if="single">商品介绍：{{ detail.urls && detail.urls.length > 0 ? detail.urls[index].title : null }}</p>
      <p class="desc" v-if="multiple">商品介绍：{{ detail.urls && detail.urls.length > 0 ? detail.urls.map(e => e.title).join('、') : null }}</p>
      <template v-if="single">
        <u-divider text="详细介绍"></u-divider>
        <u-empty text="暂无更多" />
      </template>
      <template v-if="multiple">
        <u-divider text="更多详情"></u-divider>
        <image
            v-for="(item, index) in (detail.urls || []).map(e => e.url).slice(4)"
            :key="index"
            :src="item"
            mode="widthFix"
            style="width: 100%"
        ></image>
        <u-empty v-if="(detail.urls || []).map(e => e.url).slice(4).length === 0" text="暂无更多" />
      </template>
    </view>
  </view>
</template>

<script>
import {
  album1,
  album2,
  album3,
  album4,
  album5,
  album6,
  album7,
} from "@/config/album-free";
export default {
  name: "detail",
  data() {
    return {
      detail: {
        urls: []
      },
      index: 0,
      single: false,
      multiple: false
    };
  },
  onLoad(query) {
    if (query.index || query.index === 0) {
      this.multiple = true
      if (Number(query.index) === 0) {
        this.detail = album1;
      }
      if (Number(query.index) === 1) {
        this.detail = album2;
      }
      if (Number(query.index) === 2) {
        this.detail = album3;
      }
      if (Number(query.index) === 3) {
        this.detail = album4;
      }
      if (Number(query.index) === 4) {
        this.detail = album5;
      }
      if (Number(query.index) === 5) {
        this.detail = album6;
      }
      if (Number(query.index) === 6) {
        this.detail = album7;
      }
    } else {
      this.single = true
      this.index = Number(query.cIndex)
      if (Number(query.pIndex) === 0) {
        this.detail = album1;
      }
      if (Number(query.pIndex) === 1) {
        this.detail = album2;
      }
      if (Number(query.pIndex) === 2) {
        this.detail = album3;
      }
      if (Number(query.pIndex) === 3) {
        this.detail = album4;
      }
      if (Number(query.pIndex) === 4) {
        this.detail = album5;
      }
      if (Number(query.pIndex) === 5) {
        this.detail = album6;
      }
      if (Number(query.pIndex) === 6) {
        this.detail = album7;
      }
    }
  },
};
</script>

<style scoped lang="scss">
.content {
  padding: 40rpx;
  .name,
  .desc {
    margin-bottom: 20rpx;
  }
}
</style>
